<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/easyui/themes/icon.css">
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/easyui/plugins/jquery.datagrid.js"></script>
<style type="text/css">
		.logs-detail{
		  width: 1010px;
		  margin: 0 auto;
		  overflow: auto;
		}
		.logs-detail div{
		  width:335px;
		  float:left;
		}
		.logs-detail ul {
		  list-style-type: none;
		  padding:0px;
		  padding:0px;
		  margin:5px 0px;
		}
		.logs-detail ul li{
			line-height: 24px;
			border: 1px dotted #ccc;
			font-size: 12px;
			margin:0px 10px 5px 0px;//top right bottom left
		}
		
		#opt a,
		#opt a:hover {
			margin:0px 1px;
			color: #66f;
			width:25px;
			//border:1px solid #ccc;
			text-decoration:none;
			border-style:none;
		}
		#opt a:hover{
			color: #f00;
		}
	</style>
	<script type="text/javascript">
	   function query(){
		   $('#mydatagrid').datagrid('load',{
			   typeName:$("#typeName").val(),
			   typeDesc:$("#typeDesc").val()
		   });
	   }
	   
	   function editor(value){
			alert(value);
		}
	   
	   function headline(index){
			alert(index);
		}
	   
	   function del(index){
			$.messager.confirm('消息','您确定要删除吗?',function(r) {
				if (r) {
					$.ajax({
						url:'<%=basePath%>/delete/'+index+".action",
						type:'get',
						timeout:5000,
						success:function(data) {
							$.messager.alert('消息',data);
							$('#mydatagrid').datagrid('reload');
						}
					});
				} 
			});
		}
		function formatColumn(colName,value,row,index) {
		    return eval("row."+colName);
		}
		function optdisplay(value,row,index){
		    return '<span id="opt"><a href="javascript:void(0); onclick=editor(\''+row.userName+'\')">添加</a>|'+
		    	   '<a href="javascript:void(0); onclick=headline(\''+row.userName+'\')">修改</a>|'+
		    	   '<a href="javascript:void(0); onclick=del(\''+row.usertypeId+'\')">删除</a></span>';
	   }
		$(function(){
			var pager = $('#mydatagrid').datagrid().datagrid('getPager');	// get the pager of datagrid
			pager.pagination({
				buttons:[{
					text:'导出报表',
					iconCls:'icon-excel',
					handler:function(){
						javascript:window.location.href="<%=basePath%>/user/downloadUserTypeExcel.action";
					}
				}]
			});			
		})
	</script>
</head>
<body>
	<div id="main-frame">
		<div id="search-content" style="float:left;margin-bottom:10px;">
		<div id="serar-panel" class="easyui-panel" style="width:1060px;height:auto;padding:3px;" 
				 title="查询" data-options="iconCls:'icon-search',collapsible:true,
				 pagination:true,
				 loadMsg:'正在加载服务器信息...'">
				<table style="font-size:12px">
					<tr>
						<td>类型名称</td>
						<td><input id="typeName" class="easyui-validatebox" 
							style="width:120px">
						</td>
						<td>类型描述</td>
						<td><input id="typeDesc" class="easyui-validatebox" 
							style="width:120px">
						</td>
						<td><a href="javascript:void(0);" class="easyui-linkbutton"
							data-options="iconCls:'icon-search'" onclick="query();">查询</a>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="molitor-data-content" style="float:left;">
			<table id="mydatagrid" class="easyui-datagrid" title="Monitor-logs" style="width:1060px;height:480px"
	            data-options="singleSelect:true,
	            url:'<%=basePath%>/user/getUserTypeList.action',
	            collapsible:true,
	            fitColumns:true,
	            noheader:true, //Defines if to show panel border.
	            loadMsg:'正在获取数据...',
	            pagination:true,
	            idField:'usertypeId'">
		        <thead>
		            <tr>
		                <th data-options="field:'usertypeId',width:100,sortable:true">ID</th>
		                <th data-options="field:'typeName',width:120,sortable:true">类型名称</th>
		                <th data-options="field:'typeDesc',width:100,sortable:true">类型描述</th>
		                <th data-options="halign:'center',field:'opt',width:90" formatter="optdisplay">操作</th>
		            </tr>
		        </thead>
		    </table>
	    </div>
	</div>
</body>
</html>